<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #content {
            /* 不显示，但依然占据文档流 */
            /* visibility: hidden;  */
            /* 不显示，元素脱离文档流 */
            /* display:none; */
            /* 脱离文档流 */
            /* position: absolute;
            left: -100%; */
            /* 行内块元素 不换行，又可以设置宽高 */
            /* display: inline-block;
            width: 200px;
            height: 200px;
            background-color: green;
            transform: scale(0); */
            /* opacity: 0; */
            /* display: inline-block; */
            /* translate  相对于元素本身 */
            /* transform: translate(-100%); */
            /* 离开文档流 */
            /* float: left; */
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="eq1">
            <span id="content">彪悍的人生不需要解释</span>
            <input type="text" id="input" value="彪悍的人生不需要解释">
            <input type="button" id="save" value="save">
            <input type="button" id="cancel" value="cancel">
        </div>
        <div>123</div>
    </div>

    <script>
        // js 基于原型式面向对象
        function Editinplace() {
            //有什么好处  把 dom 元素作为属性
            this.content = document.querySelector('#content');
            this.save = document.querySelector('#save');
            this.input = document.querySelector('#input');
            this.cancel = document.querySelector('#cancel');


        }
        Editinplace.prototype = {

            converttext() {
                this.content.style.display = 'inline'
                this.save.style.display = 'none';
                this.cancel.style.display = 'none';
                this.input.style.display = 'none';
            },
            convertedit() {
                this.content.style.display = 'none'
                this.save.style.display = 'inline';
                this.cancel.style.display = 'inline';
                this.input.style.display = 'inline';
            },
            bindEvents() {

                this.content.addEventListener('dblclick', () => {
                    this.convertedit();
                });
                this.save.addEventListener('click', () => {
                    this.converttext();
                    this.content.innerText = this.input.value;
                });
                this.cancel.addEventListener('click', () => {
                    this.converttext();
                });
            }
        }
        window.onload = function() {
            let editor = new Editinplace();
            // editor.converttext();
            editor.bindEvents();

        }




        //     const save = document.querySelector('#save');
        //     const cancel = document.querySelector('#cancel');
        //     const content = document.querySelector('#content');
        //     const input = document.querySelector('#input');
        //     // content.style.display = 'none'
        //     function converttext() {
        //         content.style.display = 'inline'
        //         save.style.display = 'none';
        //         cancel.style.display = 'none';
        //         input.style.display = 'none';
        //     }

        //     function convertedit() {
        //         content.style.display = 'none'
        //         save.style.display = 'inline';
        //         cancel.style.display = 'inline';
        //         input.style.display = 'inline';
        //     }
        //     content.addEventListener('dblclick', function() {
        //         convertedit();
        //         input.focus();
        //     });
        //     save.addEventListener('click', function() {
        //         //拿到当前的值，并动态设置span
        //         converttext();

        //         content.innerText = input.value;
        //     });
        //     cancel.addEventListener('click', function() {
        //         converttext();
        //     });

        //     // setTimeout(() => {
        //     //     save.style.display = 'inline';
        //     //     cancel.style.display = 'inline';
        //     //     input.style.display = 'inline';
        //     //     content.style.display = 'none'
        //     // }, 3000);
    </script>

</body>

</html>